﻿var _all=[0,0,0,0,0];

$(window).load(function () {
    $(".loading").fadeOut()
})
$(function () {
    echarts_21();
    echarts_22();
    echarts_1();
    echarts_2();
    echarts_3();
    echarts_4();
    echarts_5();



    //水深
    function echarts_21() {
        // 基于准备好的dom，初始化echarts实例
        var myChartDeep = echarts.init(document.getElementById('echart21'));
        var datas = [100,150,200,250,300,350,450,500];
        var datax = new Array();
        for(var i=0;i<8;i++){
            var myDate = new Date();
            datax.push(myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds())
        }
        Deepoption = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '0px',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                //data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                data: [],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'line',
                    //data: [5030, 8600, 3000, 7200, 7200, 5130, 10030, 8600, 13000, 7200, 9130, 4130],
                    data: [],

                    itemStyle: {
                        normal: {
                            color: '#37a3ff',
                            opacity: 1,

                            BorderRadius: 3,
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChartDeep.setOption(Deepoption);
        window.addEventListener("resize", function () {
            myChartDeep.resize();
        });

        setInterval(function() {

            $.ajax({
                type: "GET",
                url: "http://localhost/screen/open/list?key=deep",
                dataType: "json",
                success: function(data){

                    var gauge_value =data[0].dbl_v;
                    _all[4]=gauge_value;
                    var dateNow = new Date();
                    datas.shift();
                    datas.push(gauge_value);
                    datax.shift();
                    datax.push(dateNow.getHours()+":"+dateNow.getMinutes()+":"+dateNow.getSeconds())
                    Deepoption.xAxis[0].data = datax;
                    Deepoption.series[0].data = datas;
                    myChartDeep.setOption(Deepoption, true);
                    window.addEventListener("resize", function () {
                        myChartDeep.resize();
                    });
                }
            });
        }, 5000);
    }

    //流速
    function echarts_22() {
        // 基于准备好的dom，初始化echarts实例
        var myChartSpeed = echarts.init(document.getElementById('echart22'));
        var datas = [20,25,30,35,38,40,42,50];
        var datax = new Array();
        for(var i=0;i<8;i++){
            var myDate = new Date();
            datax.push(myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds())
        }
        Speedoption = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '5px',
                right: '0%',
                bottom: '0px',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                //data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                data: [],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{

                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'line',
                    //data: [7200, 9130, 5030, 8600, 3000, 7200, 4130, 5130, 10030, 8600, 13000, 7200],
                    data: [],

                    itemStyle: {
                        normal: {
                            color: '#37a3ff',
                            opacity: 1,
                            barBorderRadius: 3,
                        }
                    }
                }

            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartSpeed.setOption(Speedoption);
        window.addEventListener("resize", function () {
            myChartSpeed.resize();
        });

        setInterval(function() {

            $.ajax({
                type: "GET",
                url: "http://localhost/screen/open/list?key=speed",
                dataType: "json",
                success: function(data){

                    var gauge_value =data[0].dbl_v;
                    _all[3]=gauge_value;
                    datas.shift();
                    datas.push(gauge_value);
                    datax.shift();
                    var dateNow = new Date();
                    datax.push(dateNow.getHours()+":"+dateNow.getMinutes()+":"+dateNow.getSeconds())


                    //option.series[0].data[0].value = random;
                    Speedoption.xAxis[0].data = datax;
                    Speedoption.series[0].data = datas;
                    myChartSpeed.setOption(Speedoption, true);
                    window.addEventListener("resize", function () {
                        myChartSpeed.resize();
                    });
                }
            });
        }, 5000);

    }

    //小标题3---温度
   function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChartTemperature = echarts.init(document.getElementById('feng01'));
        var gauge_value = 25;

        TemperatureOption = {
            title: {
                x: "center",
                bottom: 0,
                //text: '风向',
                //subtext: '风向',
                subtext: '温度',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 18,
                    color: "#fff"
                },
            },
            tooltip: {
                show: true,


            },
            series: [
                {
                    type: 'gauge',
                    radius: '60%',
                    center: ['50%', '55%'],
                    splitNumber: 10, //刻度数量
                    min: 0,
                    max: 50,
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [
                                [1, '#8f8f8f']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#8f8f8f',
                            width: 1
                        },
                        length: -5,
                        splitNumber: 7
                    },
                    splitLine: {
                        show: true,
                        length: -5,
                        lineStyle: {
                            color: "rgba(255,255,255,.2)",
                        }
                    },
                    axisLabel: {
                        distance: -25,

                        // formatter: function (e) {
                        //     switch (e + "") {
                        //         case "0":
                        //             return "北风";
                        //         case "10":
                        //             return "东北风";
                        //
                        //         case "20":
                        //             return "东风";
                        //
                        //         case "30":
                        //             return "东南风";
                        //
                        //         case "40":
                        //             return "南风";
                        //
                        //         case "50":
                        //             return "西南风";
                        //
                        //         case "60":
                        //             return "西风";
                        //
                        //         case "70":
                        //             return "西北风";
                        //
                        //         default:
                        //             return e;
                        //     }
                        // },
                        textStyle: {
                            fontSize: 10,
                            color: "rgba(255,255,255,.6)",
                        }

                    },
                    pointer: { //仪表盘指针
                        show: 0
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        name: "",
                        value: 100
                    }]
                },

                {
                    //name: '风向',
                    name: '温度',
                    type: 'gauge',
                    startAngle: 225,
                    endAngle: -45,
                    radius: '56%',
                    center: ['50%', '55%'], // 默认全局居中

                    min: 0,
                    max: 50,

                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 5,
                            shadowBlur: 0,
                            color: [

                                [1, '#82b440']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                        length: 20,

                    },

                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: true,
                        length: '65%',
                        width: 4
                    },
                    detail: {
                        show: false,
                        offsetCenter: [0, 0],
                        textStyle: {
                            fontSize: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#82b440",

                        }
                    },
                    data: [{
                        name: "",
                        value: Math.floor(gauge_value)
                    }]
                }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartTemperature.setOption(TemperatureOption);
        window.addEventListener("resize", function () {
            myChartTemperature.resize();
        });
        setInterval(function() {

            $.ajax({
                type: "GET",
                url: "http://localhost/screen/open/list?key=temperature",
                dataType: "json",
                success: function(data){

                    var gauge_value =data[0].dbl_v;
                    _all[0]=gauge_value;
                    //option.series[0].data[0].value = random;
                    TemperatureOption.series[1].data[0].value = gauge_value.toFixed(2);
                    myChartTemperature.setOption(TemperatureOption, true);
                    window.addEventListener("resize", function () {
                        myChartTemperature.resize();
                    });
                }
            });
        }, 5000);
    }

    //小标题3 --- PH
    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChartPH = echarts.init(document.getElementById('feng02'));
        //var gauge_value = 30;
        var gauge_value = 7;
        PHoption = {
            title: {
                x: "center",
                bottom: 0,
                //text: gauge_value,
                //subtext: '风速km/h',
                subtext: 'PH',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 18,
                    color: "#fff"
                },
            },
            tooltip: {
                show: true,


            },
            series: [
                {
                    type: 'gauge',
                    radius: '60%',
                    center: ['50%', '55%'],
                    splitNumber: 7, //刻度数量
                    min: 0,
                    max: 14,
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [
                                [1, '#8f8f8f']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#8f8f8f',
                            width: 1
                        },
                        length: -5,
                        splitNumber: 7
                    },
                    splitLine: {
                        show: true,
                        length: -5,
                        lineStyle: {
                            color: "rgba(255,255,255,.2)",
                        }
                    },
                    axisLabel: {
                        distance: -15,

                        textStyle: {
                            fontSize: 10,
                            color: "rgba(255,255,255,.6)",
                        }

                    },
                    pointer: { //仪表盘指针
                        show: 0
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        name: "",
                        value: 100
                    }]
                },

                {
                    //name: '风向',
                    name: 'PH值',
                    type: 'gauge',
                    startAngle: 225,
                    endAngle: -45,
                    radius: '56%',
                    center: ['50%', '55%'], // 默认全局居中

                    min: 0,
                    max: 14,

                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 5,
                            shadowBlur: 0,
                            color: [

                                [1, '#2ea7ff']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                        length: 20,

                    },

                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: true,
                        length: '65%',
                        width: 4
                    },
                    detail: {
                        show: false,
                        offsetCenter: [0, 0],
                        textStyle: {
                            fontSize: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#2ea7ff",

                        }
                    },
                    data: [{
                        name: "",
                        value: Math.floor(gauge_value)
                    }]
                }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartPH.setOption(PHoption);
        /*window.addEventListener("resize", function () {
            myChart1.resize();
        });*/

        setInterval(function() {

            $.ajax({
                type: "GET",
                url: "http://localhost/screen/open/list?key=ph",
                dataType: "json",
                success: function(data){

                    //var gauge_value = (Math.random() * 60).toFixed(2) - 0;
                    var gauge_value =data[0].dbl_v;
                    _all[1]=gauge_value;
                    //option.series[0].data[0].value = random;
                    PHoption.series[1].data[0].value = gauge_value.toFixed(2);
                    myChartPH.setOption(PHoption, true);
                    window.addEventListener("resize", function () {
                        myChartPH.resize();
                    });
                }
            });
        }, 5000);
    }

    //小标题3 --- 光照
    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChartLight = echarts.init(document.getElementById('feng03'));
        var gauge_value = 2.5;

        Lightoption = {
            title: {
                x: "center",
                bottom: 0,
                //text: gauge_value,
                //subtext: '降雨量ML',
                subtext: '光照',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 18,
                    color: "#fff"
                },
            },
            tooltip: {
                show: true,
            },
            series: [
                {
                    type: 'gauge',
                    radius: '60%',
                    center: ['50%', '55%'],
                    splitNumber: 5, //刻度数量
                    min: 0,
                    max: 5,
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            shadowBlur: 0,
                            color: [
                                [1, '#8f8f8f']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1
                        },
                        length: -5,
                        splitNumber: 7
                    },
                    splitLine: {
                        show: true,
                        length: -5,
                        lineStyle: {
                            color: "rgba(255,255,255,.2)",
                        }
                    },
                    axisLabel: {
                        distance: -15,
                        textStyle: {
                            fontSize: 10,
                            color: "rgba(255,255,255,.6)",
                        }

                    },
                    pointer: { //仪表盘指针
                        show: 0
                    },
                    detail: {
                        show: false
                    },
                    data: [{
                        name: "",
                        value: 100
                    }]
                },

                {
                    //name: '风向',
                    name: '光照',
                    type: 'gauge',
                    startAngle: 225,
                    endAngle: -45,
                    radius: '56%',
                    center: ['50%', '55%'], // 默认全局居中

                    min: 0,
                    max: 5,

                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 5,
                            shadowBlur: 0,
                            color: [

                                [1, '#ff7109']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                        length: 20,

                    },

                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: true,
                        length: '65%',
                        width: 4
                    },
                    detail: {
                        show: false,
                        offsetCenter: [0, 0],
                        textStyle: {
                            fontSize: 10
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#ff7109",

                        }
                    },
                    data: [{
                        name: "",
                        value: Math.floor(gauge_value)
                    }]
                }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartLight.setOption(Lightoption);
        // window.addEventListener("resize", function () {
        //     myChartLight.resize();
        // });

        setInterval(function() {

            $.ajax({
                type: "GET",
                url: "http://localhost/screen/open/list?key=light",
                dataType: "json",
                success: function(data){

                    //var gauge_value = (Math.random() * 60).toFixed(2) - 0;
                    var gauge_value =data[0].dbl_v;
                    _all[2]=gauge_value;
                    //option.series[0].data[0].value = random;
                    Lightoption.series[1].data[0].value = gauge_value.toFixed(2);
                    myChartLight.setOption(Lightoption, true);
                    // window.addEventListener("resize", function () {
                    //     myChartLight.resize();
                    // });
                }
            });
        }, 5000);
    }

    //年销售量
    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'},
            }, "grid": {
                "top": "20%",
                "right": "50",
                "bottom": "20",
                "left": "30",
            },
            legend: {
                data: ['螺旋藻', '螺旋藻藻粉', '蛋白核小球藻', '蛋白核小球藻藻粉'],
                right: 'center', width: '100%',
                textStyle: {
                    color: "rgba(255,255,255,.5)"
                },
                itemWidth: 12,
                itemHeight: 10,
            },


            "xAxis": [
                {
                    "type": "category",
                    data: ['2018', '2019', '2020', '2021'],
                    axisLine: {show: false,},
                    axisLabel: {
                        textStyle: {
                            fontSize: 14,
                            color: "rgba(255,255,255,.5)",
                        },
                    },

                },
            ],
            "yAxis": [
                {

                    "type": "value",
                    // "name": "单位万",

                    axisTick: {show: false},
                    splitLine: {show: false,},
                    axisLine: {show: false,},
                    "axisLabel": {
                        "show": true,
                        fontSize: 14,
                        color: "rgba(255,255,255,.5)"

                    },
                    axisLine: {
                        min: 0,
                        max: 10,
                        show: false
                    },//左线色

                },
                {
                    "type": "value",
                    //"name": "增速",
                    "show": true,
                    "axisLabel": {
                        formatter: "{value} %",
                        fontSize: 14,
                        color: "rgba(255,255,255,.5)"
                    },
                    axisTick: {show: false},
                    splitNumber: 3,
                    axisLine: {show: false},//右线色
                    splitLine: {lineStyle: {color: 'rgba(255,255,255,.05)'}},//x轴线
                },
            ],
            "series": [

                {
                    "name": "螺旋藻",
                    "type": "bar",
                    "data": [36.6, 38.80, 40.84, 41.60],
                    "barWidth": "10%",
                    "itemStyle": {
                        "normal": {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#8bd46e'
                            }, {
                                offset: 1,
                                color: '#09bcb7'
                            }]),
                        }
                    },
                    "barGap": "0.2"
                },
                {
                    "name": "蛋白核小球藻",
                    "type": "bar",
                    "data": [14.8, 14.1, 15, 16.30],
                    "barWidth": "10%",
                    "itemStyle": {
                        "normal": {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#248ff7'
                            }, {
                                offset: 1,
                                color: '#6851f1'
                            }]),
                        }
                    },
                    "barGap": "0.2"
                },
                {
                    "name": "小球藻",
                    "type": "bar",
                    "data": [9.2, 9.1, 9.85, 8.9],
                    "barWidth": "10%",
                    "itemStyle": {
                        "normal": {
                            barBorderRadius: 15,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fccb05'
                            }, {
                                offset: 1,
                                color: '#f5804d'
                            }]),
                        }
                    },
                    "barGap": "0.2"
                }
                ,
                {
                    "name": "增幅",
                    "type": "line",
                    "yAxisIndex": 1,

                    "data": [3, 1, 5, 2.3],
                    lineStyle: {
                        normal: {
                            width: 2
                        },
                    },
                    "itemStyle": {
                        "normal": {
                            "color": "#3496f8",

                        }
                    },
                    //   "smooth": true,
                    symbolSize: 0,
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //环境监测
    function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

        var lightBlue = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0,
                color: 'rgba(41, 121, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(0, 192, 255, 1)'
            }],
            globalCoord: false
        }

        var option = {
            tooltip: {
                show: false
            },
            grid: {
                top: '0%',
                left: '50',
                right: '50',
                bottom: '0%',
            },
            xAxis: {
                min: 0,
                //max: 12000,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false

                },
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                data: ['温度', 'PH值', '光照', '流速', '水深'],
                //offset: 15,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: 'rgba(255,255,255,.6)',
                    fontSize: 14,


                }
            },
            series: [{
                type: 'bar',
                label: {
                    show: true,
                    zlevel: 10000,
                    position: 'right',
                    padding: 6,
                    color: '#4e84a1',
                    fontSize: 14,
                    formatter: '{c}'

                },
                itemStyle: {
                    barBorderRadius: 25,
                    color: '#3facff'
                },
                barWidth: '15',

                data: [],
                z: 6
            }
            ],
        };




        setInterval(function() {

            // 使用刚指定的配置项和数据显示图表。
            option.series[0].data=_all;
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });

        }, 5000);
    }

    function f() {
        $.ajax({
            type: "GET",
            url: "test.json",
            data: {username:$("#username").val(), content:$("#content").val()},
            dataType: "json",
            success: function(data){

            }
        });
    }

})



		
		
		


		









